<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-input class="x_soso" v-model="searchInput" placeholder="请输入用户姓名/手机号搜索"></el-input>
				<el-button type="primary" @click="searchList">查询</el-button>
				
			</div>
			<div style="text-align: left;">
				<el-button type="primary"  @click='reloadVal'>刷新</el-button>
			</div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="用户姓名" align="center" width="150" prop="personName"></el-table-column>
				<el-table-column label="登录账号" align="center" width="150" prop="personPhone"></el-table-column>
				<el-table-column label="收件人昵称" align="center" width="150" prop="nickName"></el-table-column>
				<el-table-column label="收件人电话" align="center" width="150" prop="mobile"></el-table-column>
				<el-table-column label="省" align="center" width="150" prop="provinceName"></el-table-column>
				<el-table-column label="市" align="center" width="150" prop="cityName"></el-table-column>
				<el-table-column label="区" align="center" width="150" prop="districtName"></el-table-column>
				<el-table-column label="地址" width="180" align="center" prop="address"></el-table-column>
				<el-table-column label="详细地址" align="center" width="150" prop="addessDetail"></el-table-column>
				<el-table-column label="经度" align="center" width="150" prop="longitude"></el-table-column>
				<el-table-column label="纬度" align="center" width="150" prop="latitude"></el-table-column>
				<el-table-column label="是否默认" align="center" width="150" prop="isDefault">
					<template scope="scope">
						<span v-if='scope.row.isDefault==1'>是</span>
						<span v-if='scope.row.isDefault==0'>否</span>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px;text-align: right">
				<el-pagination background @current-change="columnFind" :current-page="page.page" :page-size="page.pagesize" layout="prev, pager, next, jumper, total"
				:total="page.count">
				</el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	import {addressList} from '../../../server/index'
	import Cookie from 'js-cookie';
	export default {
		inject:['reload'], 
		data() {
			return {
				searchInput:'',
				loading: true,
				tableData: [],
				page: {
					count: 0,
					pagesize: 10,
					page: 1
				},
			}
		},
		mounted() {
			var page = 1
			this.columnFind(page)
			Cookie.remove('tabList');
		},
		methods: {
			reloadVal(){
				this.reload();
			},
			searchList(){
				this.columnFind(1)
			},
			columnFind(page) {
				const _this = this;
				_this.page.page = page;
				let obj = {
					page: _this.page.page,
					rows: _this.page.pagesize,
					keyword:undefined == _this.searchInput ? '' : _this.searchInput
				};
				_this.http.request({
					url: addressList,
					data: obj,
					success: function(res) {
						_this.loading = false;
						_this.tableData = res.list;
						_this.page.count = res.total;
					},
					error:function(err){
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.el-button--primary{
		background: rgba(113, 106, 202, 1);
		border: none;
	}
	.el-button--primary:hover{
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}
</style>